<script setup>
import ToDoFooter from './components/ToDoFooter.vue';
import ToDoHeader from './components/ToDoHeader.vue';
import ToDoMain from './components/ToDoMain.vue';
import { ref, computed } from 'vue';
const list = ref([
    { id:1,name:'晨练',done:false, },
    { id:2,name:'练书法',done:true, },
])
const addTodo = name => {
list.value.push({ name, done: false, id: ~~(Math.random() * 1000) })
}

const lastLength = computed(() => {
return list.value.filter(item => !item.done).length
})
const status = ref('all')
const showList = computed(() => {
    if (status.value === 'all') {
        return list.value
    }
    if (status.value === 'active') {
        return list.value.filter(item => !item.done)
    }
    if (status.value === 'completed') {
        return list.value.filter(item => item.done)
    }
})
const emit = defineEmits(['updateStatus'])
const updateStatus = s => {
    // status.value = status // 将子组件的状态赋值给父组件
    status.value = s // 将子组件的状态赋值给父组件
}
</script>

<template>
    <ToDoHeader @addTodo="addTodo"></ToDoHeader>
    <ToDoFooter :lastLength="lastLength" :status="status" @updateStatus="updateStatus" />
    <ToDoMain :list="showList" @delToDo="delToDo"></ToDoMain>
</template>
<style scoped>
</style>
